<template>
  <div>
    <div class="class_mid">
      <span>课题分类</span>
    </div>
    <div class="two">
    <van-tabs v-model="active">
        <van-tab class="buyclass"   title="已购买课程">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="newloading"
            :finished="newfinished"
            finished-text="没有更多了"
            :offset="0"
            @load="newonLoad">
            <div class="bao">
          <van-dropdown-menu active-color="#1989fa" class="xiala">
              <van-dropdown-item v-model="valuenumber" :options="optnumber" @change="changenumber(valuenumber)"/>
          </van-dropdown-menu>
              <van-search class="search" v-model="newvalue" placeholder="请输入关键词" @blur="alerday"/>
            </div>
            <van-grid  class="onefloor" :column-num="3">
              <van-grid-item class="eyeclass"  v-for="(item, index) in buyClass" :key="index" @click="myDetail(item.id)">
                <div slot="default" class="allClass">
                  <div class="twoimg">
                    <img slot="icon" :src="'http://upenglish.ayvvv.cn'+item.comboimage">
                    <!-- <div class="bbimg"><img class="bbbimg"  src="~@/assets/bb.png" alt=""></div> -->
                    <div class="bbimg"> <van-icon size="30"  color="white" name="play-circle" /></div>
                  </div>
                  <div slot="title" class="zhong">{{ item.comboname }}</div>
                  <div slot="title" class="time">{{ item.createtime | dateFormat }}</div>
                </div>
              </van-grid-item>
            </van-grid>
          </van-list>
          </van-pull-refresh>
        </van-tab>
        <van-tab class="buyclass"  title="全部课程">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad">
          <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
          <div class="bao">
          <van-dropdown-menu active-color="#1989fa" class="xiala">
              <van-dropdown-item class="neixiala" style="font-size:12px"   v-model="value1" :options="option1"  @change="change(value1)"/>
          </van-dropdown-menu>
          <van-search class="search"  v-model="value" placeholder="请输入关键词" @blur="getAllBigClass" />
          <van-button  class="morebuy" plain type="info" @click="appear" color="red">批量购买</van-button>
          </div>
          <van-grid class="onefloor"  :column-num="3">
            <van-grid-item class="eyeclass" v-for="(item, index) in allClassList" :key="index">
              <div slot="default" class="allClass">
                <!-- <img slot="icon" :src="'http://upenglish.ayvvv.cn'+item.comboimage" @click="allDetail(item.id)"> -->
                <img slot="icon" :src="'http://upenglish.ayvvv.cn'+item.comboimage"  @click="allDetail(item.id)">
                <div class="bbimg" style="top:30%"> <van-icon size="30"  color="white" name="play-circle" /></div>
                <span slot="title" class="zhong">{{ item.comboname }}</span>
                <div class="dd">
                  <div style="display:flex">
                  <van-checkbox icon-size='14px'  v-if="isappear"  v-model="checked[index]" checked-color="#ee0a24" class="buysell" @click="buybuy(item.id,index,item.comboprice)"></van-checkbox>
                  <span class="money">￥:{{ item.comboprice }}</span>
                  </div>
                </div>
                  <div slot="title" class="time">{{ item.createtime | dateFormat }}</div>
              </div>
            </van-grid-item>
          </van-grid>
          </van-list>
          </van-pull-refresh>
          <!-- <van-pagination
            v-model="currentPage"
            :total-items="limitList.total"
            :show-page-size="limitList.last_page"
            force-ellipses
            class="fenye"
          /> -->
        </van-tab>
      </van-tabs>
      <!-- <div class="atonce" v-show = "onceshow"><van-button type="info" @click="richbuy">立即购买</van-button></div> -->
      <div class="atonce" v-show = "onceshow"><img class="ddimg" @click="richbuy" src="~@/assets/dd.png" alt=""></div>
    </div>
  </div>
</template>

<script>
import { allBigClass, allBuyBigClass, allgrade, bigClass } from '@/api/class.js'
import { mapState } from 'vuex'
import { Toast } from 'vant'
export default {
  inject: ['reload'],
  name: 'CompanyConfigure',
  data () {
    return {
      time: '',
      value1: 0,
      valuenumber: 0,
      active: 0,
      activeKey: 0,
      allClassList: [],
      buyClass: [],
      value: '',
      newvalue: '',
      currentPage: 1,
      limitList: [],
      isLoading: false,
      count: 1,
      list: [],
      loading: false,
      newloading: false,
      finished: false,
      newfinished: false,
      option1: [
        // { text: '一年级', value: 1 },
        // { text: '二年级', value: 2 },
        // { text: '三年级', value: 3 },
        // { text: '四年级', value: 4 },
        // { text: '五年级', value: 5 },
        // { text: '六年级', value: 6 }
      ],
      optnumber: [
        { text: '选择时间查询', value: 0 },
        { text: '购买时间查询', value: 1 },
        { text: '创建时间查询', value: 2 }
      ],
      grade: '',
      page: 1,
      newpage: 1,
      checked: [],
      moreclass: [],
      allprice: [],
      isappear: false,
      select: '',
      buyprice: 0,
      onceshow: false,
      sn: true,
      newList: [],
      loadList: [],
      newloadList: [],
      onetype: 1,
      dongtotal: '',
      searchpage: 1,
      boughtlist: [],
      boughtpage: 1
    }
  },
  watch: {
    moreclass: {
      handler (a, b) {
        if (b.length >= 2) {
          // console.log(b.length)
          this.onceshow = true
        } else if (b.length < 2) {
          this.onceshow = false
        }
      },
      deep: true
    }
  },
  created () {
    if (this.user) {
      this.getallgrade()
      // this.getAllBigClass()
      // this.getBuyClass()
    } else {
      this.$router.push('/login')
    }
  },
  computed: {
    ...mapState(['user', 'id'])
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        Toast('加载完成')
        this.isLoading = false
        this.count++
      }, 1000)
    },
    change (val) {
      console.log(val)
      if (val !== 0) {
        this.grade = val
        this.gradeclass(val)
      } else {
        this.grade = ''
        this.gradeclass(val)
      }
    },
    // 改变年级获取全部课程
    async gradeclass (name) {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      this.newloadList = []
      this.allClassList = []
      this.searchpage = 1
      this.xxx()
    },
    // 全部课程的搜索框
    getAllBigClass () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      this.newloadList = []
      this.allClassList = []
      this.searchpage = 1
      this.xxx()
    },
    // xxx函数用作获取未购买的课时
    async xxx () {
      const data = await allBigClass({
        userid: this.id,
        comboname: this.value,
        grade: this.grade,
        page: this.searchpage
      })
      this.newloadList.push(...data.data.result.data)
      this.allClassList = [...new Set(this.newloadList)]
      console.log(this.allClassList, '00000000000000')
      if (this.searchpage < data.data.result.last_page) {
        console.log('操，不敢进去')
        console.log(this.searchpage)
        this.searchpage++
        this.xxx()
      }
      if (this.allClassList.length >= data.data.result.total) {
        this.finished = true
      }
      this.$toast.clear()
    },
    // yyy函数用作获取购买过的课时
    async yyy () {
      const data = await allBuyBigClass({
        userid: this.id,
        comboname: this.newvalue,
        page: this.boughtpage
      })
      this.boughtlist.push(...data.data.allbuycomboclass.data)
      this.buyClass = [...new Set(this.boughtlist)]
      if (this.boughtpage < data.data.allbuycomboclass.last_page) {
        console.log(this.searchpage)
        this.boughtpage++
        this.yyy()
      }
      if (this.buyClass.length >= data.data.allbuycomboclass.total) {
        this.finished = true
      }
      this.$toast.clear()
    },
    // 购买课程的搜索框查询
    async alerday () {
      this.$toast.loading({
        message: '获取中...',
        forbidClick: true,
        duration: 0
      })
      this.boughtlist = []
      this.buyClass = []
      this.boughtpage = 1
      // const data = await allBuyBigClass({
      //   userid: this.id,
      //   page: this.newpage,
      //   ordertype: this.onetype,
      //   comboname: this.newvalue
      // })
      // this.newList.push(...data.data.allbuycomboclass.data)
      // this.buyClass = [...new Set(this.newList)]
      // this.newloading = false
      // if (this.newpage < data.data.allbuycomboclass.last_page) {
      //   this.newpage++
      //   this.newonLoad()
      // }
      // if (this.buyClass.length >= data.data.allbuycomboclass.total) {
      //   this.newfinished = true
      // }
      // this.$toast.clear()
      this.yyy()
    },
    // 获取（一到七）所有的年级
    async getallgrade () {
      const data = await allgrade()
      this.option1 = data.data.result
      this.option1.push({ text: '全部年级', value: 0 })
    },
    myDetail (id) {
      this.$router.push({ path: `/myDetail/${id}` })
    },
    allDetail (id) {
      this.$router.push({ path: `/detail/${id}` })
    },
    async getBuyClass () {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      const data = await allBuyBigClass({
        userid: this.id,
        page: this.newpage
      })
      this.buyClass = data.data.allbuycomboclass.data
      this.$toast.clear()
    },
    async  onLoad () {
      // 异步更新数据
      const data = await allBigClass({
        userid: this.id,
        page: this.page,
        comboname: this.value,
        grade: this.grade
      })
      this.loadList.push(...data.data.result.data)
      this.allClassList = [...new Set(this.loadList)]
      console.log(this.allClassList, '111111111111')
      this.loading = false
      if (this.page < data.data.result.last_page) {
        this.page++
      }
      if (this.allClassList.length >= data.data.result.total) {
        this.finished = true
      }
    },
    async newonLoad () {
      const data = await allBuyBigClass({
        userid: this.id,
        page: this.newpage,
        ordertype: this.onetype,
        comboname: this.newvalue
      })
      this.newList.push(...data.data.allbuycomboclass.data)
      this.buyClass = [...new Set(this.newList)]
      this.newloading = false
      if (this.newpage < data.data.allbuycomboclass.last_page) {
        this.newpage++
      }
      if (this.buyClass.length >= data.data.allbuycomboclass.total) {
        this.newfinished = true
      }
    },
    buybuy (i, j, p) {
      if (this.checked[j] === true) {
        this.moreclass.push(i)
        this.allprice.push(p)
      } else if (this.checked[j] === false) {
        var ind = this.moreclass.indexOf(i)
        this.moreclass.splice(ind, 1)
        this.allprice.splice(ind, 1)
      }
      this.select = this.moreclass
    },
    richbuy () {
      for (var a = 0; a < this.allprice.length; a++) {
        this.buyprice = this.buyprice + parseInt(this.allprice[a])
      }
      console.log(this.buyprice, '买')
      if (this.moreclass.length !== 0) {
        const data = bigClass({
          userid: this.id,
          comboid: this.select.toString(),
          gobuyprice: parseInt(this.buyprice)
        })
        console.log(data)
        this.reload()
      } else {
        alert('请先选课')
      }
    },
    appear () {
      this.isappear = !this.isappear
    },
    // 改变顺序进行查询
    async  changenumber (i) {
      console.log(i, '000000000')
      if (i === 0) {
        i = 1
      }
      this.onetype = i
      this.newList = []
      this.buyClass = []
      this.newpage = 1
      const data = await allBuyBigClass({
        userid: this.id,
        page: this.newpage,
        ordertype: this.onetype
      })
      this.newList.push(...data.data.allbuycomboclass.data)
      this.buyClass = [...new Set(this.newList)]
      this.newloading = false
      if (this.newpage < data.data.allbuycomboclass.last_page) {
        this.newpage++
        this.newonLoad()
      }
      if (this.buyClass.length >= data.data.allbuycomboclass.total) {
        this.newfinished = true
      }
    }
  }
}
</script>

<style scoped lang='less'>
.van-sidebar-item--select::before {
  background-color: #fff;
}
.sidebar_mid {
  display: flex;
}
.van-sidebar-item {
  width: 200px;
  height: 120px;
}
.allClass {
  margin: 0 auto;
  text-align: center;
  img {
    width: 300px;
    height: 300px;
  }
}
.zhong {
  text-align: center;
  font-size: 12px;
}
.buyclass{
  position: relative;
  .onefloor{
    padding:0px !important;
    display: flex;
  }
}
.eyeclass{
  padding:0px !important;
  margin-left: 4%;
}
.fenye{
  position: absolute;
  bottom:0;
  left:0;
  width: 100%;
}
.bao{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.search{
  flex: 5;
  margin-left: 10px;
}
.xiala{
  flex: 3;
  margin-left: 10px;
}
.morebuy{
  flex: 2;
  height:63px;
  border-radius: 20px;
  margin-right: 10px;
}
.van-cell .van-cell--clickable .van-dropdown-item__option{
  border:1px  solid blue
}
.time{
  font-size: 12px;
  text-align: center;
}
.buysell{
    font-size: 12px;
     text-align: right;
}
.money{
  font-size: 12px;
}
.dd{
  display:flex;
  justify-content:space-around;
  padding-top: 10px;
  padding-bottom: 10px;
  align-items: center;
}
.van-checkbox__label {
    margin-left: 0px;
}
.atonce {
  position: fixed;
  top:85.5%;
  border-radius: 12px;
  z-index: 666;
}
.ddimg{
  width: 100%;
}
.twoimg{
  position: relative;

}
.bbimg{
  position: absolute;
  top:40%;
  left:40%;
  opacity: 0.8;
}
.bbbimg{
  width: 55px !important;
  height: 55px !important;
}
.neixiala {
  font-size: 12px !important;
}
</style>
